<script setup>
import { ref } from 'vue';

const username = ref('');
const password = ref('');

const radio = ref(false);

const login = () => {
  // 在这里处理登录逻辑
  console.log('登录用户名:', username.value);
  console.log('登录密码:', password.value);
};
</script>

<template>
  <view class="w-[100vw] h-[100vh] flex items-center justify-center bg-gray-100">
    <view class="w-full h-full bg-white p-[40rpx]">
      <view class="w-full flex flex-row items-center mb-[40rpx] justify-between">
        <h2 class="text-2xl font-bold">登录</h2>
        <view class="text-[#666]">跳过</view>
      </view>
      <form @submit.prevent="login" class="text-xl">
        <view class="mb-4 flex items-center justify-between fled-row h-[100rpx]">
          <label for="username" class="block text-sm font-medium text-gray-700 w-[100rpx]">用户名</label>
          <input type="text" id="username" v-model="username" class="mt-1 block flex-1 border-gray-300 shadow-sm focus:border-blue-300">
        </view>
        <view class="mb-6 flex items-center justify-between fled-row h-[100rpx]">
          <label for="password" class="block text-sm font-medium text-gray-700 w-[100rpx]">密码</label>
          <input type="password" id="password" v-model="password" class="mt-1 block flex-1 border-gray-300 shadow-sm focus:border-blue-300">
        </view>
        <view class="h-[100rpx] w-full">
          <span class="text-xs font-bold text-blue-500">获取验证码</span>
          <span class="text-xs font-bold">（验证码十分钟内有效）</span>
        </view>
        <button type="submit" class="w-full bg-blue-500 text-white font-bold py-2 px-4 rounded-lg">登录</button>
        <view class="h-[100rpx] w-full flex flex-row justify-start items-center">
          <radio :checked="radio === true" @click="radio = !radio"/>
          <view class="text-[32rpx] font-bold text-[#333]">我已阅读并接受</view>
          <view class="h-[80rpx] text-[14rpx] font-bold text-[#666]">（用户协议）和（隐私政策）</view>
        </view>
      </form>
    </view>
  </view>
</template>
